<template>
	<view class="store-table">
		<view :style="`height: 44px;`">
		</view>
		<view @click="back" style="line-height: 30px;">
			< 返回</view>
				<scroll-view scroll-y="true" class="scroll-Y margin-bottom-xl">
					<view class="row title">
						<view v-for="(item, index) in titleList" :key="index" :style="`flex: ${item.span}`">
							{{item.name}}
						</view>
					</view>
					<view class="row" v-for="item in dataList" :key="item.id">
						<view :style="`flex: 8`">
							{{item.name}}
						</view>
						<view :style="`display: flex;flex: 4`" @click="trachOpen(item)">
							<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;" src="@/static/img/time_btn.png">
							</image>
							<view class="btn">查看轨迹</view>
						</view>
					</view>
				</scroll-view>
				<view v-if="show" class="model">
					<view class="model-content">
						<view class="model-title">
							<view>{{deviceForm.name}}-行动轨迹</view>
							<view style="font-size: 40rpx;" @click="close">×</view>
						</view>
						<view class="model-search">
							<view class="date">
								<view>当前日期：</view>
								<uni-datetime-picker type="date" :value="date" @change="onChange" />
							</view>
							<button type="primary" size="mini" @click="trachDetail()">确定</button>
						</view>
						<map ref="myMap" v-if="showMap" style="width: 100%; height: 280px;margin-top: 10px;" :show-compass="false"
							:enable-rotate="false" :scale="19" :enable-satellite="false" :longitude="longitude" :latitude="latitude"
							:polyline="polyline" :markers="covers" class="map_con"></map>
					</view>
				</view>
		</view>
</template>

<script>
	var util = require("../../common/util");
	var api = require("../../common/api");
	export default {
		data() {
			return {
				show: false,
				showMap: false,
				date: new Date().Format('yyyy-MM-dd'),
				deviceForm: {},
				polyline: [],
				latitude: 30.190862540958,
				longitude: 120.167049685097,
				covers: [],
				points: [],
				titleList: [{
						name: '设备名称',
						span: '8'
					},
					{
						name: '操作',
						span: '4'
					},
				],
				dataList: [],
				contentStyle: 'ont-size: 26rpx;color: #909091;margin-bottom: 6px;',
			}
		},
		mounted() {
			this.getEquipList()
		},
		methods: {
			getEquipList() {
				util.myrequest(
					api.apis.getEquipList,
					"GET"
				).then(res => {
					if (res.code == 0) {
						this.dataList = res.list
					}
				})
			},
			trachOpen(item) {
				this.date = new Date().Format('yyyy-MM-dd')
				this.deviceForm = item
				this.show = true
				setTimeout(() => {
					this.showMap = true
				}, 200)
				this.trachDetail()
			},
			onChange(val) {
				// this.$refs.myMap.style.hight = '20px'
				this.date = val
			},
			back() {
				uni.navigateBack()
			},
			trachDetail() {
				this.covers = []
				util.myrequest(
					api.apis.getTrack, {
						// deviceCode: 868540054416553,
						// date: '2023-07-28',
						deviceCode: this.deviceForm.deviceCode,
						date: this.date
					},
					"GET"
				).then(res => {
					if (res.points && res.points.length) {
						this.longitude = this.change_zb(Number(res.points[0].lng), Number(res.points[0].lat)).lng
						this.latitude = this.change_zb(Number(res.points[0].lng), Number(res.points[0].lat)).lat
						this.covers = [res.points[0], res.points[res.points.length - 1]].map((item, index) => {
							let obj_lon = this.change_zb(Number(item.lng), Number(item.lat))
							let marker = {
								iconPath: '../../static/img/start.png',
								longitude: obj_lon.lng,
								latitude: obj_lon.lat,
							}
							if (index == 1) {
								marker.iconPath = '../../static/img/end.png'
							}
							return marker
						})
						let points = res.points.map(item => {
							let obj_lon = this.change_zb(Number(item.lng), Number(item.lat))
							let marker = {
								longitude: obj_lon.lng,
								latitude: obj_lon.lat,
							}
							return marker
						})
						this.polyline = [{
							points: points,
							color: "#31c27c",
							width: 4,
							arrowLine: true,
							borderWidth: 2 //线的边框宽度，还有很多参数，请看文档 
						}]
					} else {
						uni.showToast({
							title: '该设备暂无轨迹',
							icon: 'none'
						})
					}
				})
			},
			change_zb(bd_lng, bd_lat) {
				var X_PI = Math.PI * 3000.0 / 180.0;
				var x = bd_lng - 0.0065;
				var y = bd_lat - 0.006;
				var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
				var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
				var gg_lng = z * Math.cos(theta);
				var gg_lat = z * Math.sin(theta);
				return {
					lng: gg_lng,
					lat: gg_lat
				}
			},
			close() {
				this.show = false
				this.showMap = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.store-table {
		background-color: #fff;
		padding: 30rpx 30rpx 0;
		color: #666;

		.title {
			background: #f4f2f2;
			border-radius: 5rpx;
			padding: 10px;
			margin-bottom: 6px;
		}

		.row {
			display: flex;
			padding: 20rpx;
			border-bottom: 1px solid #f1f1f1;
		}
	}

	.btn {
		color: #357efe;
		font-size: 26rpx;
	}

	.model-title {
		display: flex;
		justify-content: space-between;
	}

	.model-search {
		display: flex;
		align-items: center;
	}

	::v-deep .uni-popup__wrapper-box {
		width: 100%;
		height: 400px;
		background-color: #fff;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.date {
		display: flex;
		align-items: center;
		flex: 1;
		margin-right: 20rpx;
	}

	::v-deep .uni-icons {
		display: none;
	}

	.model {
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.2);
		height: 100%;
		width: 100%;
		padding-top: 24px;
	}

	.model-content {
		width: 100%;
		height: 380px;
		background-color: #fff;
		padding: 20rpx 30rpx;
		position: relative;
	}
</style>